<template>
	<view>
		<u-navbar title="新增计划" :background="navbarBg" title-color="#fff" :border-bottom="false" back-icon-color="#fff"></u-navbar>
		<view class="container">
			<u-form :model="form" label-width="180" ref="uForm">
				<view class="box">
					<view class="title">计划信息</view>
					<u-form-item label="计划名称">
						<u-input v-model="form.title" input-align="right" :clearable="false" placeholder="请填写计划名称" />
					</u-form-item>
					<u-form-item label="物料类型">
						<bjx-inputs :value="form.skuName" item-key="value" placeholder='请输入内容' @list="getGradeList" @select='gradeSelect' overflow="hide">
						</bjx-inputs>
					</u-form-item>
					<u-form-item label="供应商单位">
						<view class="select-inp" @click="supplierSelectShow = true">
							<text v-if="form.supplierId">{{supplierName(form.supplierId)}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<u-select v-model="supplierSelectShow" :list="supplierList" @confirm="confirm($event,'supplierId')"></u-select>
					</u-form-item>
					<u-form-item label="要求供应时间">
						<view class="select-inp" @click="timeSelectShow = true">
							<text v-if="form.supplyTime">{{form.supplyTime}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<u-picker :safe-area-inset-bottom="true" v-model="timeSelectShow" mode="time" :params="params" @confirm="confirm($event,'supplyTime')"></u-picker>
					</u-form-item>
					<u-form-item label="收货位置">
						<view class="select-inp" @click="positionSelectShow = true">
							<text v-if="form.locationId">{{positionName(form.locationId)}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<u-select v-model="positionSelectShow" :list="positionList" @confirm="confirm($event,'locationId')"></u-select>
					</u-form-item>
					<u-form-item label="预算量(t)">
						<u-input v-model="form.totalBudget" input-align="right" :clearable="false" placeholder="请填写预算量" />
					</u-form-item>
					<u-form-item label="允许偏差">
						<u-input v-model="form.acceptOffset" input-align="right" :clearable="false" placeholder="请输入小数,如0.98" />
					</u-form-item>
				</view>
				
				<view class="box">
					<view class="title">附件</view>
					<view class="upload-box">
						<u-upload action="" ref="uUpload" :file-list="form.images" ></u-upload>
					</view>
				</view>
			</u-form>
			
			<view class="btn-box">
				<view class="submit" @click="submit">提交</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import configMixins from "../../mixins/config.mixins.js"
	import BjxInputs from '@/components/bjx-inputs/bjx-inputs.vue'
	export default{
		mixins:[configMixins],
		components:{BjxInputs},
		data(){
			return{
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				errorType:['toast'],
				//供应商选择
				supplierSelectShow:false,
				//地图位置选择
				positionSelectShow:false,
				//到货时间选择
				timeSelectShow:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
				//上传接口
				action:"",
				//表单数据
				form:{
					title:"",  //计划名
					supplierId:"", //供应商
					supplyTime:"", //预计需求时间
					locationId:"", //地图位置
					skuName:'',//物料名称
					totalBudget:'',//预算量
					images:[],//附件列表
					acceptOffset:'',//允许偏差范围
				},
			}
		},
		computed:{
			consigneeName(){
				return function(val){
					let arr = []
					val.map(item => {
						let obj = this.consigneeList.find(item1 => {
							return item1.id == item
						})
						if(obj) arr.push(obj.name)
					})
					return arr.toString()
				}
			},
		},
		async created(){
			this.getCementType()
			this.getPositionList()
			this.getSupplierList()
		},
		methods:{
			getGradeList(e){
				this.form.skuName = e.value
				if(!e.value){
					e.callback(this.gradeList)
				}else{
					let data = []
					this.gradeList.forEach(item=>{
						if(item.indexOf(e.value) > -1){
							data.push(item)
						}
					})
					e.callback(data)
				}
			},
			//选择
			gradeSelect(e){
				this.form.skuName = e
			},
			//selcet
			confirm(e,key){
				if(key == 'supplyTime'){
					this.form.supplyTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:00`
				}else{
					this.form[key] = e[0].value
				}
			},
			pageRefresh(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.refresh();
			},
			//提交
			submit(){
				//验证
				if(!this.form.title){this.$u.toast('请输入计划名称');return false}
				if(!this.form.supplierId){this.$u.toast('请选择供应商');return false}
				if(!this.form.supplyTime){this.$u.toast('请选择要求供货时间');return false}
				if(!this.form.locationId){this.$u.toast('请选择位置');return false}
				if(!this.form.skuName){this.$u.toast('请输入物料类型');return false}
				if(!this.form.acceptOffset){this.$u.toast('请输入允许重量偏差值');return false}
				uni.showLoading({
					mask:'true'
				})
				let data = JSON.parse(JSON.stringify(this.form)),images = []
				this.$refs.uUpload.lists.map(item => {
					if(item.progress == 100) images.push(item.response)
				})
				data.images = images.toString()
				this.$u.api.addPlan(data).then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					uni.hideLoading()
					uni.$u.toast('提交成功，请等待审核')
					uni.navigateBack({delta:1})
					this.pageRefresh()
				}).catch(()=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30rpx;
		padding-bottom: calc(148rpx + env(safe-area-inset-bottom));
		.box{
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			.title{
				font-size: 34rpx;
				font-weight: 800;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				padding-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.info-item{
				.info-hd{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					padding: 20rpx 0;
				}
			}
			.select-inp{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				text{
					margin-right: 8rpx;
				}
				.placeholder{
					color: #c0c4cc;
				}
			}
		}
		.concrete{
			.info-item{
				.u-form-item{
					padding: 0;
				}
			}
			.all{
				display: flex;
				justify-content: flex-end;
				font-size: 30rpx;
				font-weight: 600;
				margin-top: 20rpx;
				text{
					color: #1378FF;
				}
			}
		}
		.upload-box{
			padding-top: 10rpx;
		}
	}
	.btn-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		font-size: 34rpx;
		color: #fff;
		text-align: center;
		z-index: 99;
		padding-bottom:calc(30rpx + env(safe-area-inset-bottom)); 
		box-sizing: border-box;
		.save{
			font-size: 30rpx;
			color: #ccc;
			margin-top: 10rpx;
		}
		.submit{
			width: 100%;
			height: 78rpx;
			background: #1378FF;
			border-radius: 16rpx;
			line-height: 78rpx;
		}
	}
	.inp-hidden{
		height: 0 !important;
		min-height: 0 !important;
	}
</style>
